import React, { useEffect, useState } from "react";
import { Col, Row, Card } from "antd";
import "./home.css";
import { getCurrentDateTime, getWeather } from "../../utils/getInfo";
import { getData } from "../../api/index";
import { CodeSandboxOutlined } from "@ant-design/icons";

const Home = () => {
  
  const userimg = require("../../assets/images/touxiang.jpg");
  const [dateTime, setDateTime] = useState(getCurrentDateTime());
  const [weather, setWeather] = useState({});
  const [data, setData] = useState({});

  useEffect(() => {
    const timer = setInterval(() => {
      setDateTime(getCurrentDateTime());
    }, 1000);

    getWeather().then(setWeather);

    getData().then((res) => {
      console.log("getData response:", res);
      setData(res.data);
    });

    return () => clearInterval(timer);
  }, []);

  return (
    <Row className="home-page" gutter={24}>
      <Col span={6}>
        <Card hoverable>
          <div className="home-card">
            <img className="home-img" src={userimg} alt="User avatar" />
            <div className="home-img-container">
              <div className="user-info">
                <div className="user-name">{data.name}</div>
                <div className="user-role">{data.role}</div>
              </div>
              <div>
                <div className="date-time">
                  {dateTime.date}
                  <span>{dateTime.time}</span>
                </div>
                <div className="weather">
                  {weather.city} {weather.weather} {weather.temperature}
                </div>
              </div>
            </div>
          </div>
          <div className="login-card">
            <p>
              <CodeSandboxOutlined />
              &nbsp;上次登录时间：<span>2021-7-19</span>
            </p>
            <p>
              <CodeSandboxOutlined />
              &nbsp;上次登录地点：<span>成都</span>
            </p>
          </div>
        </Card>
      </Col>
      <Col span={18}>
        <Card title="用户信息" className="home-card"></Card>
      </Col>
    </Row>
  );
};

export default Home;
